<template>
  <div class="app-container">
    <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList" :key="index"
               class="hover-container"
               style="perspective: 1000px;
                 position: relative;
                 height: 150px;
                 margin-top: 20px;"
               :xs="24" :sm="12" :md="12" :lg="6">
        <!--   class="padding-top-bottom-16  front"  此处少添加一个fornt类名,可以正常保持间距        -->
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto ">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
            <img alt="" class="icon" :src="card.icon">
          </div>
          <div class="count">{{ card.count }} %</div>
          <div :class="card.status" class="analyze">{{ card.analyze }}</div>
        </el-card>
<!--        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto back">-->
<!--          <div class="flex justify-content-space-between">-->
<!--            <div class="title">{{ card.title }}</div>-->
<!--          </div>-->
<!--          <div class="count">{{ card.count }}</div>-->
<!--        </el-card>-->
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption0" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10">
            <el-button :type="prescriptionBtn === 'Month' ? 'primary' : 'info'" @click="handlePrescription('Month')">月</el-button>
            <el-button :type="prescriptionBtn === 'Quarter' ? 'primary' : 'info'" @click="handlePrescription('Quarter')">季</el-button>
            <el-button :type="prescriptionBtn === 'Year' ? 'primary' : 'info'" @click="handlePrescription('Year')">年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption1" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10">
            <el-button :type="leaveHosipalBtn === 'Month' ? 'primary' : 'info'" @click="handleLeaveHosipal('Month')">月</el-button>
            <el-button :type="leaveHosipalBtn === 'Quarter' ? 'primary' : 'info'" @click="handleLeaveHosipal('Quarter')">季</el-button>
            <el-button :type="leaveHosipalBtn === 'Year' ? 'primary' : 'info'" @click="handleLeaveHosipal('Year')">年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption2" class="charts-common"></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption3" class="charts-common"></EchartsComponent>
      </el-col>
    </el-row>
    <!--  三列图表 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption4" class="charts-common "></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption5" class="charts-common "></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption6" class="charts-common "></EchartsComponent>
      </el-col>
    </el-row>

    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {
  getANTDrugRatio,
  getDischargeRatio,
  getDrugAmountRatio, getDrugCompleteRatio,
  getDrugRatio, getDrugSourcingRatio,
  getRateDispenseRatio
} from "@/api/quality/medicate.js";
import DateUtils from "@/utils/utils.js";
const prescriptionBtn = ref('Month');
const leaveHosipalBtn = ref('Month');
const analyzeDialogVisible = ref(false);
// 选择历史时间
const selectDate = (time) => {
  drugRatio({starTime: time[0], endTime: time[1]});
  getAntDrugRatio({starTime:time[0]})
  drugAmountRatio({starTime: time[0], endTime: time[1]})
  drugSourcingRatio({starTime: time[0], endTime: time[1]})
  drugCompleteRatio({starTime: time[0], endTime: time[1]})
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const handlePrescription = (buttonType) => {
  prescriptionBtn.value = buttonType;
  rateDispenseRatio({btnType:prescriptionBtn.value});
};
const handleLeaveHosipal = (buttonType) => {
  leaveHosipalBtn.value = buttonType;
  dischargeRatio({btnType:leaveHosipalBtn.value});
};
const cardList = ref([
  {
    title: '门诊患者基本药物人次占比',
    count: 2847,
    icon:new URL('@/assets/static/门诊患者基本药物人次.png', import.meta.url).href,
    analyze: '较昨日增长2.8 %',
    status: 'increase'
  },
  {
    title: '门诊患者基本药物使用量占比',
    count: 1500,
    icon:new URL('@/assets/static/门诊患者基本药物使用量.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'decrease'
  },
  {
    title: '住院患者基本药物人次占比',
    count: 1500,
    icon:new URL('@/assets/static/住院患者基本药物人次.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'increase'
  },
  {
    title: '住院患者基本药物使用量占比',
    count: 1200,
    icon:new URL('@/assets/static/住院患者基本药物使用量.png', import.meta.url).href,
    analyze: '较昨日下降1.5 %',
    status: 'decrease'
  }
]);
const chartOption0 = ref({
  title: { text: '点评处方占处方总数的比例' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['第一季度', '第二季度', '第三季度', '第四季度']
  },
  yAxis: {
    type: 'value',
    // 格式化 Y 轴刻度标签为百分比形式
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      data:[20, 44, 12, 75, 19],
      type: 'line',
      areaStyle: {
        color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
      }
    }
  ]
});
const chartOption1 = ref({
  title: {text: '点评出院患者医嘱比例'},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['点评比例', '同比增长']
  },
  xAxis: [
    {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '点评比例',

    },
    {
      type: 'value',
      name: '同比增长',

    }
  ],
  series: [
    {
      name: '点评比例',
      type: 'bar',
      tooltip: {
        trigger: 'item'
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ],
      itemStyle: {
        color: '#409EFF'
      }
    },
    {
      name: '同比增长',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
});
const chartOption2 = ref({
  title: {
    text: '抗菌药物使用强度',
    subtext: 'DDD值',
    top: 'top',
    subtextStyle: {
      verticalAlign: 'top',
      padding: [0, 20, 0, 0]  // 右侧留出间距
    }},
  tooltip: {
    trigger: 'axis',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }]
});
const chartOption3 = ref({
  title: { text: '基本药物采购品种数占比' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  legend: {
    // 设置图例在右侧
    right: 10,
    orient: 'vertical'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      // 为每个数据项设置颜色
      color: ['#9ECB7F', '#5A6FC0'],
      data: [
        { value: 1048, name: '医院采购基本药品种数' },
        { value: 735, name: '医院期间采购药品种数' },

      ]
    }
  ]
});
const chartOption4 = ref({
  title: { text: '国家基本药物配备使用金额占比' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    }
  },
  series: [
    {
      data:[20, 44, 12, 75, 19,34,52],
      type: 'line',
      areaStyle: {
        color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
      }
    }
  ]
});
const chartOption5 = ref({
  title: { text: '国家组织药品集中采购中标药品使用比例' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    }
  },
  series: [
    {
      data: [12, 20, 15, 80, 70, 10, 13],
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4479F1' // 渐变起始颜色
            },
            {
              offset: 1,
              color: '#51B3AC' // 渐变结束颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
});
const chartOption6 = ref({
  title: { text: '国家组织药品集中采购中选药品完成比例' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    }
  },
  series: [
    {
      data: [12, 20, 15, 80, 70, 10, 13],
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4479F1' // 渐变起始颜色
            },
            {
              offset: 1,
              color: '#51B3AC' // 渐变结束颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
});
// 获取药物各占比信息
const drugRatio = async (params) => {
  let result = await getDrugRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
      cardList.value[0].count = data.today_DrugRatio;
      cardList.value[0].analyze = data.drugRatio > 0 ? `较昨日增长${data.drugRatio} %` : data.drugRatio < 0 ? `较昨日下降${data.drugRatio} %` : '较昨日持平';
      cardList.value[0].status = data.drugRatio > 0 ? 'increase' : data.drugRatio < 0 ? 'decrease' : 'fair';
      cardList.value[1].count = data.today_DrugTakeRatio;
      cardList.value[1].analyze = data.drugTakeRatio > 0 ? `较昨日增长${data.drugTakeRatio} %` : data.drugTakeRatio < 0 ? `较昨日下降${data.drugTakeRatio} %` : '较昨日持平';
      cardList.value[1].status = data.drugTakeRatio > 0 ? 'increase' : data.drugTakeRatio < 0 ? 'decrease' : 'fair';
      cardList.value[2].count = data.today_InpatientDrugRatio;
      cardList.value[2].analyze = data.inpatientDrugRatio > 0 ? `较昨日增长${data.inpatientDrugRatio} %` : data.inpatientDrugRatio < 0 ? `较昨日下降${data.inpatientDrugRatio} %` : '较昨日持平';
      cardList.value[2].status = data.inpatientDrugRatio > 0 ? 'increase' : data.inpatientDrugRatio < 0 ? 'decrease' : 'fair';
      cardList.value[3].count = data.today_DischargeDrugTakeRatio;
      cardList.value[3].analyze = data.dischargeDrugTakeRatio > 0 ? `较昨日增长${data.dischargeDrugTakeRatio} %` : data.dischargeDrugTakeRatio < 0 ? `较昨日下降${data.dischargeDrugTakeRatio} %` : '较昨日持平';
      cardList.value[3].status = data.dischargeDrugTakeRatio > 0 ? 'increase' : data.dischargeDrugTakeRatio < 0 ? 'decrease' : 'fair';
  }
}
// 获取点评处方总数比例
const rateDispenseRatio = async (params) => {
  let result = await getRateDispenseRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     const seriesData = [];
     const xAxis = [];
     data.forEach(item=>{
        seriesData.push(Number(item.rateDispenseRatio))
        if (prescriptionBtn.value == 'Month'){
           xAxis.push(`${item.year}年${item.month}月${item.day}日`);
        }
        if (prescriptionBtn.value == 'Quarter'){
          xAxis.push(`${item.year}年第${item.quarter}季度`);
        }
        if (prescriptionBtn.value == 'Year'){
          xAxis.push(`${item.year}年${item.month}月`);
        }
     })
    chartOption0.value.series[0].data = seriesData;
    chartOption0.value.xAxis.data = xAxis;
  }
}
// 获取出院患者遗嘱比例
const dischargeRatio = async (params) => {
  let result = await getDischargeRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData1 = [];
    const seriesData2 = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData1.push(Number(item.today_DischargeRatio))
      seriesData2.push(Number(item.dischargeRatio))
      if (leaveHosipalBtn.value == 'Month'){
        xAxis.push(`${item.year}年${item.month}月${item.day}日`);
      }
      if (leaveHosipalBtn.value == 'Quarter'){
        xAxis.push(`${item.year}年第${item.quarter}季度`);
      }
      if (leaveHosipalBtn.value == 'Year'){
         xAxis.push(`${item.year}年${item.month}月`);
      }
    })
    chartOption1.value.xAxis[0].data = xAxis;
    chartOption1.value.series[0].data = seriesData1;
    chartOption1.value.series[1].data = seriesData2;
  }
}

// 抗菌药物使用强度
const getAntDrugRatio = async (params) => {
  let result = await getANTDrugRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.antDrugTakeRatio));
      xAxis.push(item.day + "日");
    })
    chartOption2.value.xAxis.data = xAxis;
    chartOption2.value.series[0].data = seriesData;
  }
}

// 抗菌药物使用强度
const drugAmountRatio = async (params) => {
  let result = await getDrugAmountRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.drugAmountRatio));
      xAxis.push(item.month + "月");
    })
    chartOption4.value.xAxis.data = xAxis;
    chartOption4.value.series[0].data = seriesData;
  }
}

// 国家组织药品集中采购中标药品使用比例
const drugSourcingRatio = async (params) => {
  let result = await getDrugSourcingRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.sourcingTakeRatio));
      xAxis.push(item.month + "月");
    })
    chartOption5.value.xAxis.data = xAxis;
    chartOption5.value.series[0].data = seriesData;
  }
}

// 国家组织药品集中采购中选药品完成比例
const drugCompleteRatio = async (params) => {
  let result = await getDrugCompleteRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.completeRatio));
      xAxis.push(item.month + "月");
    })
    chartOption6.value.xAxis.data = xAxis;
    chartOption6.value.series[0].data = seriesData;
  }
}


// 加载界面所有数据
const getAllData = (time)=>{
     drugRatio(time); // 传入时间范围
     rateDispenseRatio({btnType:prescriptionBtn.value});
     dischargeRatio({btnType:leaveHosipalBtn.value});
     getAntDrugRatio({starTime:time.starTime})
     drugAmountRatio(time)
     drugSourcingRatio(time)
     drugCompleteRatio(time)
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
});























</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 26px;
    font-weight: 600;
    padding: 14px 0;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }


}
.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏元素背面 */
  transition: transform 0.9s ease; /* 添加过渡效果，时长 0.6 秒，缓动函数为 ease */
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg); /* 初始时背面旋转 180 度隐藏 */
}
.hover-container:hover .front {
  transform: rotateY(180deg); /* 鼠标悬浮时正面旋转 180 度隐藏 */
}
.hover-container:hover .back {
  transform: rotateY(0deg); /* 鼠标悬浮时背面旋转到 0 度显示 */
}
::v-deep .charts-common .el-button {
  height: fit-content;
  padding:5px;
}

</style>
